<template>
  <div>
    <button @click="updata">传递数据 {{ age }}+{{ yanMsg }}</button>
    <h3>1.我是child组件。。。。</h3>
    <h3>2.child数据:{{ cname }}</h3>
    <h3>3.拿到root组件的数据--{{ msg }}</h3>
    <h4>
      <h2>作用域插槽</h2>
      <h4><slot name="aa" :cname="cname">插槽1</slot></h4>
      <h4>插槽2</h4>
    </h4>
    <grand></grand>
  </div>
</template>
<script>
import grand from './grandCom.vue'
export default {
  data() {
    return {
      cname: '我是child。。。。',
      yanMsg: this.yan
    }
  },
  inject: ['age'],
  emits: ['change'],
  props: ['yan', 'msg'],
  methods: {
    updata() {
      this.yanMsg = 2021
    }
  },
  created() {
    this.$emit('change', this.cname)
  },
  components: {
    grand
  }
}
</script>
<style scoped>
h3 {
  color: red;
}
:deep h3 {
  font-size: 6px;
  color: green;
}
</style>
